
/**
 * 导入函数工具类
 */
@import "mixin/mixin";

header{
    display: inline-flex;
    flex-direction: row;
    position: fixed;
    z-index: 999999;
    top:0;
    left: 0;
    font-size: 14px;
    color: $tarot-header-font-color;
    width:100%;
    height: 40px;
    line-height: 40px;
    background: $tarot-header-bg-color;

    & .header-right ul,
    & .header-center ul{
        & li{
            list-style: none;
            float: left;
            cursor: pointer;
        }
    }
    // 头部左侧样式
    & .header-left {
        width: 20%;
        & > span{
            @include tarot-logo-color();
            -webkit-background-clip: text;
            color: transparent;
            margin-left: 10px;
            font-size: 22px;
            font-weight: bold;
        }
    }
    // 头部中间样式
    & .header-center {
        width: 55%;
        line-height: 40px;
        text-align: center;
        & ul li {
            padding: 0 10px;
            margin-left: 1px;
            & > a {
                color: $tarot-header-font-color;
                text-decoration: none;
            }
            &:hover {
                background: $tarot-header-hover-color;
            }
        }
    }
    // 头部右侧样式
    & .header-right {
        width: 25%;
        & ul{
            float: right;
            clear: left;
            & li:nth-child(2),
            & li:nth-child(3) {
                padding: 0 10px;
                &:hover {
                    background: $tarot-header-hover-color;
                }
            }
        }
    }
}
